<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>请选择支付方式</title>
<link rel="stylesheet" type="text/css" href="__TEMP__/{$style}/public/css/pay/pay_main.css">
<script src="__TEMP__/{$style}/public/js/jquery.js"></script>
<style>
.paybox .p-key {
	float: none;
}

.shortcut, .shortcut .w {
	height: 80px;
}

.checkstand {
	font-size: 16px;
	color: #565656;
}
.mask-layer{
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	display:none;
	background: rgba(0,0,0,0.7);
}
.mask-layer-dialog{
	background: #ffffff;
	position: absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-169px;
	width:400px;
	outline: 5px solid #999999;
	display:none;
}
.mask-layer-dialog header{
	width: 100%;
	height: 20px;
	background: #BFBFBF;
}
.mask-layer-dialog header i{
	display: inline-block;
	height:20px;
	float: right;
	margin-right:5px;
	font-size:20px;
	font-style: normal;
	color:#939393;
	cursor:pointer;
}
.mask-warning-img,.mask-content{
	float: left;
	padding:20px 0 20px 10px;
}
.mask-warning-img{
	width:20%;
	text-align: center;
}
.mask-content{
	width:75%;
}
.mask-content h3{
	color:#565656;
}
.mask-content p{
	color:#999999;
	margin-top:5px;
}
.mask-content button{
	border:0;
	background: #ff9c00;
	padding:10px 20px;
	color:#ffffff;
	border-radius: 3px;
	margin:10px 0 0;
	cursor:pointer;
}
.order .o-left{
	padding-left:0;
}
</style>
</head>
<body>
<div class="shortcut">
	<div class="w">
		<div class="s-logo">
			<img alt="{$web_info.title}收银台" src="__UPLOAD__/{$web_info.logo}"
				style="width: 240px;"><strong class="checkstand">收银台</strong>
		</div>
		<!--<ul class="s-right"> -->
		<!--	<li id="loginbar" class="s-item fore1"><a href="//home.jd.com" -->
		<!--		target="_blank" class="link-user">畏小小</a><a -->
		<!--		href="" -->
		<!--		class="link-logout">退出</a></li> -->
		<!--	<li class="s-div">|</li> -->
		<!--	<li class="s-item fore2"><a class="op-i-ext" -->
		<!--		href="">我的订单</a></li> -->
		<!--	<li class="s-div">|</li> -->
		<!--	<li class="s-item fore3"><a class="op-i-ext" target="_blank" -->
		<!--		href="">支付帮助</a></li> -->
		<!--	<li class="s-div">|</li> -->
		<!--	<li class="s-item fore4"><a class="op-i-ext" target="_blank" -->
		<!--		href="">问题反馈</a></li> -->
		<!--</ul> -->
		<!--<span class="clr"></span> -->
	</div>
</div>
<div class="w">
	<div class="order clearfix">
<!-- 		<div class="o-qrcode"> -->
<!-- 			<a class="oq-img" href="javascript:;"><img src="__UPLOAD__/{1$pay_qrcode}" alt=""></a> -->
<!-- 		</div> -->
		<!-- 订单信息 -->
		<div class="o-left">
			<h3 class="o-title">订单提交成功，请尽快付款！订单号：{$pay_value.out_trade_no}</h3>
			<p class="o-tips">
				请您在<span class="font-red j_orderTime">00:00:00</span>内完成支付，否则订单会被自动取消。
			</p>
		</div>
		<!-- 订单信息 end -->
		<!-- 订单金额 -->
		<div class="o-right">
			<div class="o-price">
				<em>应付金额</em><strong>{$pay_value.pay_money}</strong><em>元</em>
			</div>
			<!--<div class="o-detail"> -->
			<!--	<a href="javascript:shopOrderDetail(this);">订单详情<i></i></a> -->
			<!--</div> -->
		</div>
		<!-- 订单金额 end -->
		<!-- <div class="o-list j_orderList" id="listPayOrderInfo" -->
		<!-- 	style="display: none;"> -->
		<!-- <div class="o-list-info"> -->
		<!-- 	<span class="mr10">收货地址：山西运城市绛县横水镇柳庄村第四居民</span> <span class="mr10">收货人：张小雪</span> -->
		<!-- 	<span>182****3547</span> -->
		<!-- </div> -->
		<!-- <div class="o-list-info"> -->
		<!-- 	<span>商品名称：荣耀8青春版 全网通 标配版 3GB+32GB 珠光白</span> -->
		<!-- </div> -->
		<!-- </div> -->
	</div>
	<div class="payment pay-load">
<!-- 		<div class="jp-logo-wrap"> -->
<!-- 			<span class="jp-logo"></span> -->
<!-- 		</div> -->
		<div class="jp-notice" style="background: none;">
			<!--<div class="jn-wrap"> -->
			<!--	<ul class="jn-list"> -->
			<!--		<li><span>首次使用"扫一扫"支付享受满59元减5元</span></li> -->
			<!--	</ul> -->
			<!--</div> -->
		</div>
		<!-- 收银台加载loading -->
		<div id="payChanel" class="pay-channel animate-enter animate-enter-active">
			{if condition="$pay_config['wchat_pay_config']['is_use']==1"}
			<div class="paybox paybox-baitiao">
				<div class="p-wrap">
					<i class="p-border"></i>
					<div class="p-key">
						<!-- 支付方式选择  ui-check-disable-->
						<span class="p-k-check ui-checkbox-wrap ">
							<i class="ui-checkbox-L"><em class="js-select-pay" data-pay="wchat"></em></i>
							<i class="p-k-icon"><img src="__TEMP__/{$style}/public/css/pay/pay_wchat.png"></i><strong>微信支付</strong>
						</span>
						<!-- 支付方式选择 end -->
					</div>
					<!-- 用的的时候把这个去掉“.paybox .p-key{float: none;}” -->
					<!--<div class="p-value"> -->
					<!--	<div class="p-v-line baitiao-balance"> -->
					<!--	<span class="font-gray">未开通微信支付</span> -->
					<!--</div> -->
					<!--</div> -->
				</div>
			</div>
			{/if}
			{if condition="$pay_config['ali_pay_config']['is_use']==1"}
			<div class="paybox paybox-xjk">
				<div class="p-wrap">
					<i class="p-border"></i>
					<div class="p-key">
						<span class="p-k-check ui-checkbox-wrap ">
							<i class="ui-checkbox-L"><em class="js-select-pay" data-pay="alipay"></em></i>
							<i class="p-k-icon"><img src="__TEMP__/{$style}/public/css/pay/pay_alipay.png"></i>
							<strong>支付宝支付</strong>
						</span>
					</div>
					<!-- 用的的时候把这个去掉“.paybox .p-key{float: none;}” -->
					<!--<div class="p-value"> -->
					<!--	<div class="p-v-line xjk-balance"> -->
					<!--		<span class="font-gray">未开通支付宝支付</span> -->
					<!--	</div> -->
					<!--</div> -->
				</div>
			</div>
			{/if}
		</div>
		<div class="pay-verify animate-enter animate-enter-active">
			<div class="pv-button" style="display: none;">
				<input class="ui-button ui-button-XL ui-button-XL-loading" type="submit" value="加载中">
			</div>
			<div class="pv-button">
				<a class="ui-button ui-button-XL disable js-pay">去支付</a>
			</div>
		</div>
	</div>
</div>
<div class="mask-layer"></div>
<article class="mask-layer-dialog">
	<header>
		<i>x</i>
	</header>
	<div class="mask-warning-img">
		<img src="__TEMP__/{$style}/public/css/pay/pay_masklayer_warning.png"/>
	</div>
	<div class="mask-content">
		<h3>请您在新打开的页面上完成付款操作。</h3>
		<p>付款完成前，请不要关闭此窗口。<br/>完成付款后请根据您的情况点击下面的按钮</p>
		<button>已完成付款，查看我的会员中心</button>
	</div>
</article>
<input type="hidden" value="{$pay_value.create_time}" id="create_time" />
<script>
//当浏览器窗口大小改变时，设置显示内容的高度  
window.onresize=function(){
// 	$(".mask-layer-dialog").
}
function countdown(){
	var date = new Date($("#create_time").val().replace(/\-/g, "\/"));//开始时间，24小时后结束
	date.setDate(date.getDate()+1);
	var date_now = new Date();//当前时间
	var endTime = date.getTime(); //结束时间毫秒数
	var lag = (endTime - date_now.getTime()) / 1000; //当前时间和结束时间之间的秒数
	if (lag > 0) {
		var second = Math.floor(lag % 60);
		var minite = Math.floor((lag / 60) % 60);
		var hour = Math.floor((lag / 3600) % 24);
		if(second<10){
			second = "0"+second;
		}
		
		if(minite<10){
			minite = "0"+minite;
		}
		if(hour<10){
			hour = "0"+hour;
		}
		$(".j_orderTime").text(hour+":"+minite+":"+second);
	} else{
		$(".j_orderTime").text("00:00:00");
	}
}

$(function() {
	countdown();
	setInterval("countdown()",1000);
	$(".js-select-pay").click(function() {
		if ($(this).hasClass("selected")) {
			$(this).removeClass("selected");
			$(".js-pay").addClass("disable");
		} else {
			$(".js-select-pay").removeClass("selected");
			$(this).addClass("selected");
			$(".js-pay").removeClass("disable");
			}
		})

	//去支付
	$(".js-pay").click(function() {
		if ($('.js-select-pay.selected').attr("data-pay") != null) {
			var url = "APP_MAIN/";
			switch ($('.js-select-pay.selected').attr("data-pay")) {
			case "wchat":
				url += 'pay/wchatpay?no={$pay_value.out_trade_no}';
				break;
			case "alipay":
				//跳转到支付宝
				url += 'pay/alipay?no={$pay_value.out_trade_no}';
				break;
			}
			window.open(url);
			$(".mask-layer-dialog").fadeIn(300);
			$(".mask-layer").fadeIn(300);
		}
	})
	
	//关闭弹出层
	$(".mask-layer-dialog header i").click(function(){
		$(".mask-layer-dialog").fadeOut(300);
		$(".mask-layer").fadeOut(300);
	})
	
	$(".mask-content button").click(function(){
		window.location.href = "SHOP_MAIN/member/orderlist";
	})
})

function shopOrderDetail(obj) {
	if ($("#listPayOrderInfo").is(":hidden")) {
		$(obj).text("收起详情");
		$("#listPayOrderInfo").show(400);
	} else {
		$(obj).text("订单详情");
		$("#listPayOrderInfo").hide(400);
	}
}
</script>
</body>
</html>